<template>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img width="300px" height="200px" :src="image" />
            </van-swipe-item>
        </van-swipe>

    <!-- 四宫格 -->
    <div class="grid" style="margin-top: 10px;">
            <van-grid square :border="false">
                <van-grid-item icon-color="red" v-for="item in gridList" :key="item.id" :icon="item.icon" :text="item.text" />
            </van-grid>
    </div>
    <div class="find">
        <div class="top">
            <div style="font-weight: bold;margin-left: 5px;">发现好歌单</div>
            <div>
                <van-button style="height:30px;" plain round type="default">查看更多</van-button>
            </div>
        </div>
        <div class="bottom">
            <div class="image_1">
              <img style="border-radius: 10px;" width="140px" height="140px" src="https://wx4.sinaimg.cn/mw690/d315af46ly1hfg90b3jmtj20k00k0goe.jpg">
              <img style="border-radius: 10px;" width="140px" height="140px" src="https://t14.baidu.com/it/u=4288338354,2232137274&fm=225&app=113&f=JPEG?w=3640&h=2048&s=721171848011E9ED29868C880300309B">
            </div>
            <div class="image_2">
                <img style="border-radius: 10px;" width="140px" height="140px" src="https://img2.baidu.com/it/u=4098570823,4106020899&fm=253&app=120&f=JPEG?w=1422&h=800">
              <img style="border-radius: 10px;" width="140px" height="140px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F14%2F20191114222514_spskq.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754445437&t=208edf57c7e53deaf8e6fb634268cf32">
            </div>
        </div>
    </div>
</template>
<script setup>
const images = [
  'https://t11.baidu.com/it/u=1212751941,196652654&fm=30&app=106&f=JPEG?w=536&h=536&s=BEB42F8E5C1333ED1E19C98B0300F007',
  'https://img1.baidu.com/it/u=708401505,2998928126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
];

import { ref } from 'vue';
const gridList = ref([
    {id:1,icon:"thumb-circle",text:'每日推荐'},
    {id:2,icon:"gift-card",text:'私人FM'},
    {id:3,icon:"music",text:'歌单'},
    {id:4,icon:"smile-comment",text:'排行榜'}
])
</script>
<style lang="less" scoped>
.top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;      
}
.image_1{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;  
    align-items: center; 
    padding: 10px; 
    box-sizing: border-box;
}
.image_2{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;  
    align-items: center; 
    padding: 10px; 
    box-sizing: border-box;
}
</style>